<template>
  <div class="earlyWarningWrap">
    <NavBar
      :title="'天气动画'"
      :cityName="cityName"
      :areaName="areaName"
      :SeveralMenus="'1'"
      :text="'返回'"
      @clicksPopul="clicksPopul"
    ></NavBar>
    <div class="yubao">
      <!--地图-->
      <div
        class="mapClass"
        id="map"
        style="width: 100%; height: 100%"
        v-if="showArea"
      ></div>
      <!--地图上的名字-->
      <div class="mapCenterTit">
        <span
          >逐小时{{ title }}格点实况（08时 ～ 09 时）（单位：{{ unit }}）</span
        >
      </div>
      <div class="tuceng" @click="tucengclick">
        <img
          style="width: 25px; height: 25px"
          src="../assets/liveData/tuceng.png"
          alt=""
        />
        图层
      </div>
      <Sidebar :arr="arr" @changeFactor="changeFactor"></Sidebar>
      <!--颜色区域-->
      <TemperatureControl :factorIndex="factorIndex"></TemperatureControl>
      <!--时间区间-->
      <div class="timeArea1">
        <van-icon name="play-circle-o" v-if="ishow" @click="clickdh" />

        <van-icon name="pause-circle-o" v-else @click="clickdh1" />

        <vue-slider
          v-model="value"
          :tooltip="'always'"
          :data="data"
          :dotStyle="{ border: '1px solid #0054EB' }"
          @change="sliderChangeFN"
          :enable-cross="false"
        >
        </vue-slider>
      </div>
    </div>
    <popup
      v-if="showpopul == true"
      @close="showpopul = false"
      @huanhu="huanhu"
    ></popup>
    <comArea
      v-if="showAreapop"
      @closeEmit="showAreapop = false"
      :arr="arr1"
      @confirmEmit="confirmEmitMet"
    >
    </comArea>
    <canvas id="canvasMap" style="display: none"></canvas>
  </div>
</template>
<script type="text/javascript">
import meteoroEarlyWarningApi from "@/service/earlyWarning.js";
import weatherApi from "@/service/wrater.js";
import data0 from "@/components/mixins/data.json";
import VueSlider from "vue-slider-component";
import earlyWarning from "@/components/mixins/earlyWarning.js";
import area from "@/components/mixins/area.js";
import popup from "../components/popup/index.vue";
import "vue-slider-component/theme/default.css";
import map from "@/util/map.js";
import { getItem } from "../util/storage.js";
import comArea from "@/components/common/area.vue";
export default {
  mixins: [earlyWarning, area],
  data() {
    return {
      ishow: true,

      title: "温度",
      active: 0,
      titleCon: "太原市",
      unit: "℃",
      features: [],
      ruleType: [],
      timeParams: {},
      params: {},
      indexdt: "",
      listI: 0,
      showpopul: false,
      autoplayInterval: null, // 存储定时器引用

      marks: {
        0: "0°C",
        8: "8°C",
        37: "37°C",
        50: "39",
        100: "80",
      },
      arr: [
        {
          text: "温度",
          unactive: "wendu.png",
          active: "wenduActive.png",
        },
        {
          text: "湿度",
          unactive: "shi.png",
          active: "shiActive.png",
        },
        {
          text: "风力",
          unactive: "feng.png",
          active: "fengActive.png",
        },
        {
          text: "降雨",
          unactive: "rain.png",
          active: "rainActive.png",
        },
      ],
      activeRule: 0,
      data: [],
      data1: [],
      value: "",
      factorIndex: 0,
      showArea: true,
      showAreapop:false,
      location: "",
      gdfsTime: [],
      newArray: [],
      map: null,
      city: "",
      type: "气温",
      autumntemperaturearr: [],
      cityName:'',
      areaName:'',
      arr1:[]
    };
  },
  created() {
    this.$toast.loading({
        message: "渲染中...",
        forbidClick: true,
        duration: 0,
      });
    var location = getItem("location");
    this.city = location[1].name;
    map.init().then((res) => {
      this.ruleType = this.mixin_ruleTypeObj;
      this.timeParams = this.ruleType[0].timeParams;
      this.params = this.ruleType[0].params;
      this.$util.bianKong();

      this.getTime("first");
    });
  },

  watch: {},
  components: {
    VueSlider,
    popup,
    comArea
  },
  destroyed: function () {
    this.map.remove();
    // 离开页面生命周期函数
    // this.websocketclose()
  },
  methods: {
    clicksPopul() {
      this.showAreapop = true;

      this.arr1 = [this.cityName, this.areaName];
    },
    confirmEmitMet(value) {
      var _this = this;
      _this.showAreapop = false;
      _this.$util.Convertlatitude(value).then((result) => {
     
       _this.location = [result[0], result[1]];
   
       _this.map.setCenter( _this.location);
       _this.map.setZoom(9.3);
 

        _this.cityName = value[1].name;
        _this.areaName = value[2].name;
        _this.arr1 = [value[1].name, value[2].name];
      
      });
    },
    huanhu(style) {
      this.map.setBaseStyle(style);
    },
    handleSliderChange(newValue) {},
    // slider 改变值
    sliderChangeFN(value) {
      this.value = value;
      this.ishow = true;

      this.data1.forEach((it, index) => {
        if (value == it.gdfsTime) {
          this.slideId = it.id;
        }
      });
      this.info_getTime(this.slideId, "slider");
    },
    clickdh() {
      let currentIndex = this.data.indexOf(this.value); // 获取当前值的索引
      if (currentIndex !== -1) {
        this.newArray = this.data1.slice(currentIndex + 1); // 截取索引后的元素

        this.ishow = false;
        this.getlist("", "");
      } else {
        console.log("当前值不在数组中");
      }
    },
    clickdh1() {
      this.ishow = true;
      this.$util.clearcanvans(this.map);
    },
    onClickLeft() {
      this.$router.go(-1);
      this.ishow = true;
      //   this.data = []
    },
    onClickRight() {},
    changeTab(index) {
      if (index == 0) {
        this.titleCon = "24小时降水预报";
      } else if (index == 1) {
        this.titleCon = "温度预报";
      }
    },

    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    },
    async getlist(id, index) {
      for (let i = 0; i < this.newArray.length; i++) {
        await this.sleep(2000);
        if (this.ishow == true) {
          return;
        } else {
          this.value = this.newArray[i].gdfsTime;

          this.getTime("animation");

          //   if (i == this.data.length - 1) {
          //     this.ishow = true
          //   }
        }
      }
      //   this.changeFactor(this.factorIndex, id)
    },
    stopAutoplay() {
      clearInterval(this.autoplayInterval);
    },
    changeFactor(item, index) {
      this.factorIndex = index;

      if (index == 0) {
        this.type = "气温";
        this.title = "温度";
        this.unit = "℃";
      } else if (index == 1) {
        this.type = "相对湿度";
        this.title = "湿度";
        this.unit = "%RH";
      } else if (index == 2) {
        this.type = "10m风速";
        this.title = "风力";
        this.unit = "m/s";
      } else if (index == 3) {
        this.type = "10天地面总降水24小时累积量（3小时间隔)";
        this.title = "3h降雨";
        this.unit = "mm";
      } else if (index == 4) {
        this.type = "10天地面总降水24小时累积量（12小时间隔)";
        this.title = "12降雨";
        this.unit = "mm";
      }
      this.getTime();
    },
    getTime(current) {
      var params = {
        type: this.type,
      };

      weatherApi
        .weatherDh(params)
        .then((res) => {
          this.gdfsTime = [];
          this.data = [];
          this.data1 = [];
      
          for (var i = 0; i < res.length; i++) {
            res[i].gdfsTime = `${res[i].gdfsTime.slice(5, 10)}-${res[
              i
            ].gdfsTime.slice(11, 16)}`;
            this.data.push(res[i].gdfsTime);
            this.data1.push(res[i]);

            this.gdfsTime[i] = res[i].gdfsTime.slice(11, 13);
          }

          if (current == "first") {
            this.value = res[0].gdfsTime;

            this.initMap(
              [112.5659408833, 37.870682192588],

              res[0].id
             
            );
         
          } else {
            this.data1.forEach((it, index) => {
              if (this.value == it.gdfsTime) {
                this.slideId = it.id;
                //   this.getlist(this.slideId)
              }
            });
            if (current == undefined) {
              this.value = this.data[0];

              this.ishow = true;
              this.info_getTime(res[0].id, current);
            } else {
              this.info_getTime(this.slideId, current);
              this.$util.clearcanvans(this.map);
            }
          }
        })
        .catch((error) => {
          this.$toast.clear();
          this.toastNoData("暂无数据");
        });
    },
    info_getTime(id, slider) {
      var params = {
        id: id,
      };

      meteoroEarlyWarningApi.getTu(params).then((res) => {
        // this.showArea = false

        this.features = res.features;
        this.$toast.clear();
        if (slider == undefined) {
          this.$util.allclearcanvans(this.map);
        }
        // if (slider == 'animation') {
        //   this.$util.clearcanvans(this.map)
        // }

        this.$util.canvans(this.features, this.factorIndex, this.map, id);

        if (slider == "slider") {
          this.$util.clearcanvans(this.map);
        }
      });
    },
    initMap(location, id) {
      this.location = location;

      var _this = this;
      _this.$toast.loading({
        message: "渲染中...",
        forbidClick: true,
        duration: 0,
      });
      var index = this.factorIndex;
      var type = "";
      if (index == 0) {
        type = this.wenDu;
      } else if (index == 1) {
        type = this.shiDu;
      } else if (index == 2) {
        type = this.fengLi;
      } else if (index == 3) {
        type = this.jiangShui;
      } else if (index == 4) {
        type = this.jiangShui;
      }

      _this.map = new SGMap.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets-v2",
        // 默认缩放层级
        zoom: 5.4,
        // minZoom: 5,
        maxZoom: 9.5,
        // 地图中心点  maxZoom:8.5,
        center:     _this.location,
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei",
      });

      // 监听地图加载完成事件
      // 地图事件请参考文档 https://map.sgcc.com.cn/products/js-sdk/v3/doc.html#Events
      _this.map.on("load", function (e) {
        _this.$util.initLayer("山西省", _this.map);
        _this.$util.search("山西省", _this.map);
        _this.info_getTime(id);
        _this.$toast.clear()
      });

      _this.map.on("click", function (e) {});
    },

    tucengclick() {
      this.showpopul = true;
    },

    toastNoData(message) {
      this.$toast({
        message: message,
        forbidClick: true,
        duration: 2000,
      });
      var _this = this;
      setTimeout(() => {
        // _this.initMap(this.$store.getters.cityLongAndLati)
      }, 2000);
    },
    findNumMinAndMax() {
      let min,
        max = 0;
      let values = this.features.map((item) => item.properties.value);
      let maxValue = Math.max(...values);
      let minValue = Math.min(...values);
      return [minValue, maxValue];
    },
    topTabbarMet(index) {
      this.activeRule = 0;
      this.active = index;
      if (index == 0) {
        this.ruleType = this.mixin_ruleTypeObj;
      } else {
        this.ruleType = this.mixin_diagnose;
      }
      this.timeParams = this.ruleType[0].timeParams;
      this.params = this.ruleType[0].params;
      this.initApi();
    },
    ruleTypeMet(index) {
      this.activeRule = index;
      this.timeParams = this.ruleType[index].timeParams;
      this.params = this.ruleType[index].params;
      this.initApi();
    },
  },
};
</script>
<style type="text/css" lang="less" scoped>
/deep/ .van-nav-bar__content {
  background: #357cff;
}

/deep/ .vue-slider-rail {
  margin-left: 45px;
  /* margin-right: 40px; */
  width: 80%;
}
.timeArea {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 500px;
  border-radius: 10px;
  background-color: white;
  padding: 8px 15px;
  padding-bottom: 20px;

  .timeAreaName {
    font-size: 12px;
    color: #999;
  }
}
.earlyWarningWrap {
  position: relative;
  width: 100%;
  height: 100%;

  left: 0;
  top: 0;

  .topBgPic {
    width: 100%;
    height: 100%;
  }

  .yubao {
    position: absolute;
    width: 100%;
    height: 100%;

    .titleArea {
      position: relative;
      left: 0;
      top: 0;

      img {
        width: 100%;
      }

      .titleCon {
        position: absolute;
        top: 6px;
        .px2rem(left, 25px);
        color: white;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .mapClass {
      background-color: white;
      position: absolute;
      left: 0;
      right: 0;

      bottom: 0;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    .mapCenterTit {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 25px;

      left: 50%;
      transform: translate(-50%, -50%);
      width: 345px;
      height: 40px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #101010;

      background: #ffffff;
      box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.5);
      border-radius: 10px;
      text-align: center;
      font-weight: bold;
    }

    .topTabbarNew {
      position: absolute;
      left: 10px;
      top: 100px;
      width: 20px;
      height: 90px;
      z-index: 1;

      img {
        width: 100%;
      }
    }

    .timeArea1 {
      position: absolute;
      position: absolute;
      left: 50%;
      /* right: 10px; */
      bottom: 80px;
      transform: translate(-50%, -50%);
      width: 90%;
      /deep/ .van-icon {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 9;
      }
      .timeAreaName2 {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .LiveDatabottomTabbar {
    position: absolute;
    .px2rem(left, 20px);
    .px2rem(right, 20px);
    top: 630px;
    height: 40px;
    overflow: hidden;

    .leftMyButton {
      float: left;
    }

    .RightMyButton {
      float: right;
    }
  }

  .topTabbar {
    position: absolute;
    left: 0;
    top: 46px;
    padding: 5px;
    background: white;
    background: rgba(255, 255, 255, 0.7);

    .routine {
      display: block;
      font-size: 14px;
      color: #666;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #cecece;
    }

    .routine:last-child {
      border-bottom: none;
    }
  }

  .typeLine {
    position: absolute;
    right: 5px;
    top: 50px;
    height: 250px;
    padding: 5px;
    background: white;
    background: rgba(255, 255, 255, 0.7);
    overflow: scroll;
  }

  .typeLineLi {
    display: block;
    font-size: 14px;
    color: #666;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #cecece;
  }
  .tuceng {
    position: absolute;
    width: 40px;
    display: flex;
    z-index: 99;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 4px;
    height: 40px;
    right: 10px;
    top: 23%;
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
    border-radius: 5px;
  }
  .typeLineLiActive {
    background: #1a88f9;
    color: white;
  }

  .typeLineLi:last-child {
    border-bottom: none;
  }

  /deep/ .vue-slider-dot-tooltip-top {
    top: 220%;
  }
  /deep/ .vue-slider {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
  .custom-tooltip {
    width: 65px;
    font-size: 12px;
  }
  /deep/ .vue-slider-dot-tooltip-top {
    top: -5px;
  }
}
</style>
